<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>版型与居中测试</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                background-color: dodgerblue;
            }
            .center{
                background-color: springgreen;
                width: 1000px;
                margin: 0 auto;
            }
            .card{
                width: 200px;
                height: 300px;
                border: 2px solid rebeccapurple;
                background-color: mediumpurple;
                margin:0 auto;/*让块级元素卡片自身在版心内水平居中*/
                text-align: center;/*让卡片内的文字在卡片里水平居中*/
                line-height: 300px;/*让文字行高与卡片一样，实现卡片内的文字垂直居中*/
            }
        </style>
    </head>
    <body>
        <!--  最外层的功能块  -->
        <div class="main">
            <!--  版心：固定宽度且居中  -->
            <div class="center">
                <!--  在版心里主要展示的内容  -->
                <div class="card">我是内容</div>
                <div class="card">我是内容</div>
                <div class="card">我是内容</div>
            </div>
        </div>
    </body>
</html>